<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app-31">
        <div style="width: 100%; height: 20px; background: #00BFFF;">
            <router-link to="/index">t1</router-link>
            <router-link to="/index2">t2</router-link>
            <!-- 路由视图 -->
            <!-- 如果在 HTML 中有一个以上的路由视图 router-view，需要给 router-view 指定 name，
            在路由中需要使用 components 映射多个组件根据 name 设置组件与 router-view 的绑定关系 -->
            <router-view name="v1"></router-view>
            <router-view name="v2"></router-view>
        </div>
    </div>

    <script type="text/javascript">
        <!-- vue 的路由旨在为单页面应用开发提供便携 -->
        // 1. 定义链接跳转的模板（组件）
        const t11 = {
            template: `<div style="width: 400px; height: 200px; border: blue 1px solid" >
                    t11
                    </div>`
        };
        const t12 = {
            template: `<div style="width: 400px; height: 200px; border: red 1px solid" >
                    t12
                    </div>`
        };
        const t21 = {
            template: `<div style="width: 400px; height: 200px; border: yellow 1px solid" >
                    t21
                    </div>`
        };
        const t22 = {
            template: `<div style="width: 400px; height: 200px; border: wheat 1px solid" >
                    t22
                    </div>`
        };


        // 2. 定义路由
        const my_router = new VueRouter({
           routes: [
               {
                   path: '/index',
                   components: {
                       v1: t11,
                       v2: t12
                   }
               },
               {
                   path: '/index2',
                   components: {
                       v1: t21,
                       v2: t22
                   }
               }
           ]
        });
        // 3. 引用路由
        var vm = new Vue({
           el: '#app-31',
            data: {
              rName: "r1"
            },
            router: my_router,
            methods: {
               test: function () {
                   // js 代码实现路由跳转，编程式导航
                   my_router.push({name: vm.rName});

               }
            }
        });
    </script>

</body>
</html>